<template>
    <el-dialog
      :title="title"
      :visible.sync="openDlg"
      width="500px"
      append-to-body
      destroy-on-close
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="200px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="年份" prop="yearStr">
                <el-date-picker
                    v-model="form.yearStr"
                    type="year"
                    value-format="yyyy"
                    placeholder="选择年份"
                    style="width:100%"
                ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="本科名额（人）" prop="personNumber">
                <el-input-number style="width:100%" v-model.number="form.personNumber" :min="0" :step="1" step-strictly controls-position="right" placeholder="请输入本科名额（人）" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="专科名额（人）" prop="personNumber2">
                <el-input-number style="width:100%" v-model.number="form.personNumber2" :min="0" :step="1" step-strictly controls-position="right" placeholder="请输入专科名额（人）" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="金额（元/人）"  prop="money">
                <el-input-number style="width:100%" v-model.number="form.money" :min="0" :step="1" step-strictly controls-position="right" placeholder="请输入金额（元/人）" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="openDlg = false">取 消</el-button>
      </div>
    </el-dialog>
</template>

<script>
import { 
  addScholarshipPlan,
  editScholarshipPlan
 } from "@/api/poorStudent-scholarship/plan.js";
export default {
    name:"ScholarshipAdd",
    data () {
        return {
            title: '',
            openDlg: false,
            // 表单参数
            form: {
              yearStr: '',
              personNumber: null,
              personNumber2: null,
              money: null
            },
            // 表单校验
            rules: {
              yearStr: [
                { required: true, message: '请选择年份', trigger: 'change' }
              ],
              personNumber: [
                { required: true, message: '请输入本科名额（人）', trigger: 'blur' }
              ],
              personNumber2: [
                { required: true, message: '请输入专科名额（人）', trigger: 'blur' }
              ],
              money: [
                { required: true, message: '请输入金额（元/人）', trigger: 'blur' }
              ]
            }
        }
    },
    methods:{
        open (type, rowdata, scholarshipType) {
            if (type == 'add') {
              this.title = '新增'
              this.form = {
                yearStr: '',
                personNumber: null,
                personNumber2: null,
                money: null,
                scholarshipType
              }
            } else {
              this.title = '编辑'
              this.form = rowdata
            }
            
            this.openDlg = true
        },
        submitForm () {
          this.$refs["form"].validate((valid) => {
            if (valid) {
              if (this.form.id != undefined) {
                editScholarshipPlan(this.form).then((response) => {
                  this.$modal.msgSuccess("修改成功");
                  this.openDlg = false;
                  this.$emit("onSearch")
                });
              } else {
                addScholarshipPlan(this.form).then((response) => {
                  this.$modal.msgSuccess("新增成功");
                  this.openDlg = false;
                  this.$emit("onSearch")
                });
              }
            }
          });
        },
    }

}
</script>

<style lang="scss" scoped>
    .planTotal{
        display: flex;
        font-size: 13px;
        color: #606266;
        &-left{
            margin-left: 30px;
        }
        &-right{
            margin-left: 20px;
        }
    }
</style>